<script lang="ts">
  import { defineComponent, computed, unref } from 'vue'
  import { BackTop } from 'ant-design-vue'

  import { useRootSetting } from '/@/hooks/setting/useRootSetting'
  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'
  import { useDesign } from '/@/hooks/web/useDesign'
  import { useUserStoreWithOut } from '/@/store/modules/user'

  import { SettingButtonPositionEnum } from '/@/enums/appEnum'
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'

  import SessionTimeoutLogin from '/@/views/sys/login/SessionTimeoutLogin.vue'
  export default defineComponent({
    name: 'LayoutFeatures',
    components: {
      BackTop,
      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue')),
      SessionTimeoutLogin,
    },
    setup() {
      const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
        useRootSetting()
      const userStore = useUserStoreWithOut()
      const { prefixCls } = useDesign('setting-drawer-feature')
      const { getShowHeader } = useHeaderSetting()

      const getIsSessionTimeout = computed(() => userStore.getSessionTimeout)

      const getIsFixedSettingDrawer = computed(() => {
        if (!unref(getShowSettingButton)) {
          return false
        }
        const settingButtonPosition = unref(getSettingButtonPosition)

        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
          return !unref(getShowHeader) || unref(getFullContent)
        }
        return settingButtonPosition === SettingButtonPositionEnum.FIXED
      })

      return {
        getTarget: () => document.body,
        getUseOpenBackTop,
        getIsFixedSettingDrawer,
        prefixCls,
        getIsSessionTimeout,
      }
    },
  })
</script>

<template>
  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
  <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
  <SessionTimeoutLogin v-if="getIsSessionTimeout" />
</template>

<style lang="less">
  @prefix-cls: ~'@{namespace}-setting-drawer-feature';

  .@{prefix-cls} {
    position: absolute;
    top: 45%;
    right: 0;
    z-index: 10;
    display: flex;
    padding: 10px;
    color: @white;
    cursor: pointer;
    background-color: @primary-color;
    border-radius: 6px 0 0 6px;
    justify-content: center;
    align-items: center;

    svg {
      width: 1em;
      height: 1em;
    }
  }
</style>
